<template>
    <div class="mainFrame">
        <el-form :model="form">
            <el-form-item label="预警名称" :label-width="formLabelWidth">
                <el-input v-model="warningName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="预警等级" :label-width="formLabelWidth">
                <el-select v-model="warningLevel" placeholder="请选择预警等级">
                    <el-option label="蓝色预警" value="蓝色预警" style="color:blue;" />
                    <el-option label="黄色预警" value="黄色预警" style="color:orange;" />
                    <el-option label="红色预警" value="红色预警" style="color:red;" />
                </el-select>
            </el-form-item>
            <el-form-item label="预警信息" :label-width="formLabelWidth">
                <el-input v-model="warningInfo" :autosize="{ minRows: 4, maxRows: 6 }" type="textarea" placeholder="请输入预警信息"
                    maxlength="250" show-word-limit clearable resize="none" />
            </el-form-item>
            <el-form-item label="预警地点:请移动多边形框选预警区域" :label-width="formLabelWidth"></el-form-item>
        </el-form>
        <div class="bottomFrame">
            <el-row style="width:100%;height:100%">
                <el-col :span="12">
                    <maps mode="edit" ref="polymap"></maps>
                </el-col>
                <el-col :span="12" style="height:100%">
                    <div class="buttonArea">
                        <el-button type="primary" round @click="onSubmit()">发布预警信息</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div>
            <div class="bottomFrame">
            <el-row style="width:100%;height:100%">
                <el-col :span="12">
                    <MapContainer></MapContainer>
                </el-col>
                <el-col :span="12" style="height:100%">
                    <div class="buttonArea">
                        <el-button type="primary" round @click="onSubmit()">发布预警信息</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>

        </div>
    </div>
</template>

<style scoped>
.mainFrame {
    position: relative;
    width: 98%;
    height: 98%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #f2f6fc;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.bottomFrame {
    width: 100%;
    position: relative;
    flex: 1;
    min-height: 0;
}

.buttonArea {
    width: 100%;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
}
</style>

<script>
import maps from '../../../components/manager/warning/maps.vue'
import { postRequestWithRaw } from '../../../api/axiosAPI'
import MapContainer from '../../../components/MapContainer.vue'
export default {
    setup() {

    },

    data() {
        return {
            warningName: null,
            warningLevel: '蓝色预警',
            warningInfo: null,
        }
    },
    components: {
        MapContainer:MapContainer
    },
    methods: {
        onSubmit() {
            if (this.warningName === ''
                || this.warningName === null
                || this.warningLevel === ''
                || this.warningLevel === null
                || this.warningInfo === ''
                || this.warningInfo === null) {
                alert('请填写相关信息!');
            } else {
                //获取并处理数据
                let postWarningName = this.warningName;
                let postWarningLevel = 1;
                if(this.warningLevel === '蓝色预警'){
                    postWarningLevel = 1;
                }else if(this.warningLevel === '黄色预警'){
                    postWarningLevel = 2;
                }else{
                    postWarningLevel = 3;
                }
                // $$getInstance()：获取polygon实例

                // 应急信息
                let postWarningInfo = this.warningInfo;
                // 获取缩放级别
                let postZoom = this.$refs.polymap.$refs.amap.$$getInstance().getZoom();
                // 获取经纬度坐标
                let postCenter = [this.$refs.polymap.$refs.amap.$$getInstance().getCenter().lng,this.$refs.polymap.$refs.amap.$$getInstance().getCenter().lat];
                let postPath = [];
                // 获取区域路径
                let tempPath = this.$refs.polymap.$refs.polymap.$$getInstance().getPath();
                for(var i = 0;i<tempPath.length;i++){
                    postPath.push([tempPath[i].lng,tempPath[i].lat]);
                }
                // console.log(postCenter);
                // console.log(postPath);
                //拼接formData
                //let formData = new FormData();
                // formData.append('name',postWarningName);
                // formData.append('level',postWarningLevel);
                // formData.append('info',postWarningInfo);
                // formData.append('zoom',postZoom);
                // formData.append('center',postCenter);
                // formData.append('polygonPath',postPath);
                // postRequestWithFormData('http://localhost:8022/warning/add',formData);
                postRequestWithRaw('http://localhost:8022/warning/add',{
                    name: postWarningName,
                    level: postWarningLevel,
                    info: postWarningInfo,
                    zoom: postZoom,
                    center: postCenter,
                    polygonPath: postPath
                }).then((response)=>{
                    if(response.status === 200 && response.data.msg === 'SUCCESS'){
                        alert('发布成功!');
                    }else{
                        alert('发布失败，请稍后再试!');
                    }
                })
            }
        }
    }
}
</script>
